<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>详情</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				width: 10rem;
			}

			.bg img {
				width: 10rem;
			}

			.top {
				padding: 16px;
				border-bottom: 0.5px solid rgb(237, 237, 237);
			}

			.top h1 {
				font-size: 16px;
				font-weight: 700;
			}

			.top1 div {
				margin-top: 12px;
				display: inline;
				margin-right: 16px;

			}

			.top1 div:nth-of-type(1) {
				color: orange;
				font-size: 16px;
			}

			.top1 div:nth-of-type(2) {
				color: rgb(157, 157, 157);
				font-size: 12px;
			}

			.top1 div:nth-of-type(3) {
				color: rgb(157, 157, 157);
				font-size: 12px;
			}

			.top1 div:nth-of-type(4) {
				color: rgb(157, 157, 157);
				font-size: 12px;
			}

			.zaixian {

				padding: 16px;
				position: relative;
			}

			.zaixian p {
				font-size: 16px;
				position: absolute;
				top: 35%;
				left: 15%;
			}

			.zaixian1 {
				height: 60px;
				padding: 8px 8px 30px 40px;
				position: relative;
				border-bottom: 0.5px solid rgb(237, 237, 237);
			}

			.zaixian1 div:nth-of-type(2) {
				font-size: 16px;
				position: absolute;
				top: 18%;
				left: 20%;
			}

			.zaixian1 div:nth-of-type(3) {
				font-size: 14px;
				position: absolute;
				top: 50%;
				left: 20%;
			}

			.jieshao {
				padding: 16px 0px 28px 20px;
				border-bottom: 0.5px solid rgb(237, 237, 237);
			}

			.jieshao p:nth-of-type(1) {
				font-size: 20px;
				padding-bottom: 10px;
			}

			.jieshao p:nth-of-type(2) {
				font-size: 14px;
			}

			.xiangqing {
				padding: 16px 16px 28px 16px;
				border-bottom: 0.5px solid rgb(237, 237, 237);
			}

			.xiangqing h2 {
				font-size: 20px;
				padding-bottom: 16px;
			}

			.xiangqing p {
				font-size: 14px;
			}

			.jigou {
				padding: 16px 16px 28px 16px;
				position: relative;
				border-bottom: 0.5px solid rgb(237, 237, 237);
			}

			.jigou h2 {
				font-size: 20px;
				margin-bottom: 16px;
			}

			.jigou li {
				list-style: none;
				display: inline;
				font-size: 14px;
				color: rgb(137, 137, 137);

			}

			.jigou p {
				font-size: 16px;
				position: absolute;
				top: 40%;
				left: 25%;
			}

			.jigou img {

				padding: 3px;
				border: 0.5px solid rgb(221, 221, 221);
			}

			.jigou ul {
				position: absolute;
				top: 55%;
				left: 25%;
			}

			.remen {
				padding: 16px;
				border-bottom: 0.5px solid rgb(237,237,237);

			}

			.remen h2 {
				font-size: 20px;
				margin-bottom: 16px;
			}

			.remen img {
				width: 128px;
				height: 71.91px;
			}

			.remen h3 {
				font-size: 16px;
			}

			.remen p {
				font-size: 14px;
				color: #5fb41b;
			}

			.remen1 {
				margin-bottom: 16px;
				position: relative;
			}

			.remen2 {
				position: absolute;
				top: 3px;
				left: 150px;
			}

			.pic1 {
				position: relative;
			}

			.pic1 span {
				font-size: 12px;
				color: #ffffff;
				background: rgba(0, 0, 0, 0.7);
				position: absolute;
				left: 0px;
				bottom: 8%;
			}

			#p1 p {
				color: red;
			}
			.bottom_nav{
				padding: 16px;
			}
			.bottom1 p{
				display: inline;
				font-size: 20px;
				
				padding-bottom: 10px;
				margin-left: 20px;
			}
			.bottom1 p:nth-of-type(1){
				color: #009EEF;
				border-bottom: 2px solid #009eef;
			}
			.bottom2{
				padding:12px 4px ;
				margin-top: 15px;
				margin-bottom: 30px;
			}
			.bottom2 p{
				
				display: inline-block;
				font-size:14px ;
				padding: 6px 14px;
				border-radius: 15px;
				border: 0.5px solid #333333;
				
				
			}
			.shangke{
				
				width: 100%;
				
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: #FFFFFF;
				border-radius: 7.14286rem;
				background:#23b8ff ;
				position: fixed;
				bottom: 0px;
				font-size: 16px;
				
			}
			
		</style>
	</head>
	<body>

		<div class="bg">
			<img src="xiangqing1.png" />
		</div>
		<div class="box">
			<div class="top">
				<h1>张政老师的课堂</h1>
				<div class="top1">
					<div>免费</div>
					<div>订阅 999999</div>
					<div>最近在学 9999+</div>
					<div>好评100%</div>
				</div>
			</div>
			<div class="zaixian">
				<img src="shang.png">
				<p>在线课堂</p>
			</div>
			<div class="zaixian1">
				<div><img src="bofangzhong.png"></div>
				<div>张政老师的课堂</div>
				<div>老师已下课</div>
			</div>
			<div class="jieshao">
				<p>老师介绍</p>
				<p>暂无</p>
			</div>
			<div class="xiangqing">
				<h2>课程详情</h2>
				<p>腾讯课堂体验课</p>
				<p>*课程提供者：腾讯课堂极速版</p>
			</div>
			<div class="jigou">
				<h2>授课机构</h2>
				<img width="56px" src="logo.jpg">
				<p>腾讯课堂极速版</p>
				<ul>
					<li>好评度100%</li>
					<li>|</li>
					<li>课程数1</li>
					<li>|</li>
					<li>学生数100</li>
				</ul>
			</div>
			<div class="remen">
				<h2>机构热门课程</h2>
				<div class="remen1">
					<div class="pic1">
						<img src="remen1.jpg">
						<span>一万人最近报名</span>
					</div>
					<div class="remen2">
						<h3>顶级名师带你冲刺高考</h3>
						<p>免费</p>

					</div>
				</div>
				<div class="remen1">
					<div class="pic1">
						<img src="remen2.jpg">
						<span>一万人最近报名</span>
					</div>
					<div class="remen2">
						<h3>2020高考数学冲刺系列公开课</h3>
						<p>免费</p>

					</div>
				</div>
				<div class="remen1">
					<div class="pic1">
						<img src="remen3.jpg">
						<span>1298人最近报名</span>
					</div>
					<div class="remen2">
						<h3>Sugar数学2020高考极速提分攻略</h3>
						<p>免费</p>

					</div>
				</div>
				<div class="remen1">
					<div class="pic1">
						<img src="remen4.jpg">
						<span>19万人购买</span>
					</div>
					<div class="remen2">
						<h3>2020高考数学秒杀技巧全集送独家绝版10年真题</h3>
						<div id="p1">
							<p>¥4899.00</p>
						</div>

					</div>
				</div>
				<div class="remen1">
					<div class="pic1">
						<img src="remen5.jpg">
						<span>15万人购买</span>
					</div>
					<div class="remen2">
						<h3>【最强名师团】2020高考一轮复习精选</h3>
						<div id="p1">
							<p>¥3999.00</p>
						</div>

					</div>
				</div>
			</div>
			<div class="bottom_nav">
				<div class="bottom1">
					<p>相关培训</p>
					<p>热门培训</p>
				</div>
				<div class="bottom2">
					<p>奥数培训</p>
					<p>小学奥数培训</p>
					<p>初中奥数培训</p>
				</div>
			</div>
			<div class="shangke">
				<p>开始上课</p>
			</div>
		</div>
	</body>
</html>
